/**
 * 功能描述: 基础水平分割线样式表
 * @author 崔孝楠
 * @date 2022/9/22 15:34
 * @version 1.0
 */
@import '../../style/index';
// 分割线布局
@mixin divider--layout {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: $line-height-base;
}
// 文字布局
@mixin divider-text--layout {
  display: flex;
  margin: 16px 0;
  white-space: nowrap;
  text-align: center;
}
// 文字内部前后元素布局
@mixin divider-text-before--layout {
  position: relative;
  top: 50%;
  width: 50%;
  transform: translateY(50%);
}
// 分割线样式
@include b(divider) {
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  border-top: $border-base;
  @include divider--layout;
}
// 水平分割线布局
@include b(divider-horizontal) {
  display: flex;
  clear: both;
  width: 100%;
  min-width: 100%;
  margin: 24px 0;
}
// 水平分割线子元素样式
@include b(divider-horizontal) {
  // 居中文字样式
  &.#{$namespace}-divider-with-text {
    color: $color-text-primary;
    font-weight: 500;
    font-size: $font-size-medium;
    border-top: 0;
    border-top-color: $border-color-base;
    @include divider-text--layout;
    // 文字内部前后元素样式
    &::before, &::after {
      border-top: 1px solid transparent;
      border-top-color: inherit;
      border-bottom: 0;
      content: '';
      @include divider-text-before--layout
    }
  }
  // 左边文字布局
  &.#{$namespace}-divider-with-text-left {
    // 前置子元素
    &::before {
      top: 50%;
      width: 5%;
    }
    // 前置子元素
    &::after {
      top: 50%;
      width: 95%;
    }
  }
  // 右边文字布局
  &.#{$namespace}-divider-with-text-right {
    // 前置子元素
    &::before {
      top: 50%;
      width: 95%;
    }
    // 前置子元素
    &::after {
      top: 50%;
      width: 5%;
    }
  }
}
// 文字布局
@include b(divider-inner-text) {
  display: inline-block;
  padding: 0 1em;
}
// 虚线样式
@include b(divider-dashed) {
  background: none;
  border-color: $border-color-base;
  border-style: dashed;
  border-width: 1px 0 0;
}
// 水平分割虚线样式
@include b(divider-horizontal) {
  .#{$namespace}-divider-with-text.#{$namespace}-divider-dashed {
    &::before, &::after {
      border-style: dashed none none;
    }
  }
}
